<mat-toolbar class="dialog-title"
  color="primary">
  <div>{{ 'preference.scripts.dialog.title' | translate }}</div>
  <button mat-icon-button
    (click)="onNoClick()">
    <fa-icon icon="times"></fa-icon>
  </button>
</mat-toolbar>

<div mat-dialog-content>
  <mat-tab-group>
    <mat-tab [label]="'preference.scripts.dialog.scriptSettings' | translate">
      <hr />
      <strong>{{ 'preference.scripts.dialog.scriptSettings' | translate }}</strong>
      <hr />
      <div style="display: flex; width: 100%">
        <div>
          <mat-form-field style="padding-right: 1rem">
            <mat-label>{{ 'preference.scripts.dialog.profile' | translate }}</mat-label>
            <input matInput
              [(ngModel)]="data.data.profile"
              [formControl]="profile"
              autocomplete="off"
              [disabled]="!isAdmin" />
            <mat-error *ngIf="profile?.errors?.required">{{'validators.required' | translate }}</mat-error>
            <mat-error *ngIf="profile?.errors?.minlength">
              {{ profile?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field style="padding-right: 1rem">
            <mat-label>{{ 'preference.scripts.dialog.hepAlias' | translate }}</mat-label>
            <input matInput
              [(ngModel)]="data.data.hep_alias"
              [formControl]="hep_alias"
              autocomplete="off"
              [disabled]="!isAdmin" />
            <mat-error *ngIf="hep_alias?.errors?.required">{{'validators.required' | translate }}</mat-error>
            <mat-error *ngIf="hep_alias?.errors?.minlength">
              {{ hep_alias?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
            </mat-error>
            <mat-error *ngIf="hep_alias?.errors?.maxlength">
              {{ hep_alias?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
            </mat-error>
            <mat-error *ngIf="hep_alias?.errors?.pattern && !hep_alias?.errors?.minlength">
              {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-" or "_"]
            </mat-error>
          </mat-form-field>
        </div>

        <div>
          <mat-form-field style="padding-right: 1rem">
            <mat-label>{{ 'preference.scripts.dialog.hepId' | translate }}</mat-label>
            <input matInput
              [(ngModel)]="data.data.hepid"
              [formControl]="hepid"
              autocomplete="off"
              [disabled]="!isAdmin" />
            <mat-error *ngIf="hepid?.errors?.required">{{'validators.required' | translate }}</mat-error>
            <mat-error *ngIf="hepid?.errors?.min">{{'validators.minNumber' | translate }} 1</mat-error>
            <mat-error *ngIf="hepid?.errors?.max">{{'validators.maxNumber' | translate }} 10000</mat-error>
            <mat-error *ngIf="hepid?.errors?.pattern">{{'validators.patternNumber' | translate }}</mat-error>
          </mat-form-field>
        </div>
      </div>

      <div style="display: flex; width: 100%">
        <div>
          <mat-form-field style="padding-right: 1rem">
            <mat-label>{{ 'preference.scripts.dialog.type' | translate }}</mat-label>
            <input matInput
              [(ngModel)]="data.data.type"
              [formControl]="type"
              autocomplete="off"
              [disabled]="!isAdmin" />
            <mat-error *ngIf="type?.errors?.required">{{'validators.required' | translate }}</mat-error>
            <mat-error *ngIf="type?.errors?.minlength">
              {{ type?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
            </mat-error>
            <mat-error *ngIf="type?.errors?.maxlength">
              {{ type?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
            </mat-error>
            <mat-error *ngIf="type?.errors?.pattern && !type?.errors?.minlength">
              {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-" or "_"]
            </mat-error>
          </mat-form-field>
        </div>
        <!-- <div>

          <mat-form-field type="number"
            style="padding-right: 1rem">
            <mat-label>{{ 'preference.scripts.dialog.partition' | translate }}</mat-label>
            <input matInput
              type="number"
              [(ngModel)]="data.data.partid"
              [formControl]="partid"
              autocomplete="off"
              [disabled]="!isAdmin" />
            <mat-error *ngIf="partid?.errors?.required">{{'validators.required' | translate }}</mat-error>
            <mat-error *ngIf="partid?.errors?.min">{{'validators.minNumber' | translate }} 1</mat-error>
            <mat-error *ngIf="partid?.errors?.max">{{'validators.maxNumber' | translate }} 100</mat-error>
            <mat-error *ngIf="partid?.errors?.pattern">{{'validators.patternNumber' | translate }}</mat-error>
          </mat-form-field>
        </div> -->
        <div>
          <mat-checkbox [(ngModel)]="data.data.status">{{data.data.status ? 'Active' : 'Inactive'}}</mat-checkbox>
        </div>
      </div>
    </mat-tab>
    <mat-tab [label]="'preference.scripts.dialog.jsScripts' | translate">
      <hr />

      <p>
        <strong>{{ 'preference.scripts.dialog.jsScripts' | translate }}</strong>
      </p>
      <small>{{ 'preference.scripts.dialog.jsScriptsDescription' | translate }}</small>
      <hr />
      <full-screen (fullPage)='disableClose($event)' 
                    (import)='import($event)' 
                    [data]='{json:data.data.data, title: "Script " +  data.data.hep_alias + " " + data.data.profile, type: "js"}'>
        <ace-editor [mode]="'javascript'"
          [theme]="'monokai'"
          [readOnly]="false"
          [(text)]="data.data.data"
          #data_view
          [style.min-height.%]="100"
          style="padding: 5px"
          [disabled]="!isAdmin"
        ></ace-editor>
      </full-screen>
    </mat-tab>
  </mat-tab-group>

  
</div>

<div mat-dialog-actions
  style="float: right; margin-bottom: 0rem">
  <button mat-raised-button
    (click)="onNoClick()">{{'LINK.buttons.cancel' | translate}}</button>
  <button mat-raised-button
    color="primary"
    (click)="onSubmit()"
    cdkFocusInitial>
    {{'LINK.buttons.save' | translate}}
  </button>
</div>